<template>
    <el-tree-select
        v-model="model"
        :data="finalOptions"
        :disabled="disabled"
        check-strictly
        default-expand-all
        @change="doChanged"
        :value-key="valueKey"
        node-key="id"
        :props="{ label: 'name' }"
        :multiple="multiple"
        clearable
    >
    </el-tree-select>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from "vue";

const props = defineProps(["options", "disabled", "multiple"]);
const model = defineModel();
const emits = defineEmits(["change"]);
const finalOptions = ref([]);
const valueKey = ref();

onMounted(() => {
    loadOptions().then((resp) => {
        finalOptions.value = resp;
    });
});

function loadOptions() {
    const options = props.options;
    if (!options) {
        return Promise.resolve([]);
    }

    if (options instanceof Array) {
        // 是直接数据
        return Promise.resolve(options);
    } else if (options instanceof Function) {
        // 是函数
        return Promise.resolve(options());
    } else if (options.type) {
        // 是对象
        valueKey.value = options.valueKey;
        if (options.type == "js" || options.type == "func") {
            return app.callFunc(options.data);
        } else {
            return Promise.resolve(options.data || []);
        }
    }
}

function doChanged() {
    emits("change", ...arguments);
}
</script>
